<template>
  <div class="strut-div">
    <div class="card-item" style="height:240px;">
      <p class="card-title">科研人员学历构成</p>
      <div class="card-div">
        <common-pieNew-chart ref="techPeoplePie" :config='techPeoplePieConfig'></common-pieNew-chart>
      </div>
    </div>

    <div class="card-item" style="height:255px;margin-top:20px;">
      <p class="card-title">科研人员导师类型</p>
      <div class="card-div" style="padding-left:20px;">
        <top-bar-chart ref="techTutorBar" :config="techTutorBarConfig"></top-bar-chart>
      </div>
    </div>

    <div class="card-item" style="height:240px;margin-top:20px; width: 420px;margin-right: 20px;">
      <p class="card-title">科研人员政治面貌</p>
      <div class="card-div">
        <common-pieNew-chart ref="techPoliticalPie" :config='techPoliticalPieConfig'></common-pieNew-chart>
      </div>
    </div>

    <div class="card-item" style="height:240px;margin-top:20px; width: 420px;">
      <p class="card-title">科研人员性别占比</p>
      <div class="card-div sex-wrap">
        <div>
          <div class="sex-box">
            <img src="@/assets/imgs/v2/data-man.png" />
            <br />
            男性{{man/(man+woman)*100}}%
          </div>
          <div class="sex-box">
            <img src="@/assets/imgs/v2/data-woman.png" />
            <br />
            女性{{woman/(man+woman)*100}}%
          </div>
        </div>


        <div class="sex-right">
          <div class="sex-rt clear-float">
            <p> <span class="lcd-font">{{man}}</span> <br />
              男性(人) </p>
            <p> <span class="lcd-font">{{woman}}</span> <br />
              女性(人) </p>
          </div>
          <div class="sex-rm">
            <p><span :style="{'width': man/(man+woman)*100 +'%'}"></span></p>
          </div>
          <div class="sex-rb">人群总数：{{man+woman}}人</div>
        </div>
      </div>

    </div>

    <div class="card-item" style="height: 200px;margin-top: 20px;">
      <p class="card-title" style="line-height:45px;">专家团队</p>
      <div class="card-div">
        <el-carousel trigger="click" height="200px" :interval="7000" indicator-position="none" arrow="never">
          <el-carousel-item v-for="(photos,index) in photoList" :key="index">
            <div class="photo-container" >
              <div class="photo-bg" v-for="photo in photos" :key="photo.url">
                <div>
                  <img :src="photo.url"/>
                  <div>
                    <p>姓名：{{photo.name}}</p>
                    <p>职称：{{photo.title}}</p>
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>

      </div>
    </div>


  </div>
</template>
<script>
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import topBarChart from '@/views/sx-digital-agriculture/sx-left/top-bar-chart.vue';
  import CommonLineChart from '@/components/common/common-line-chart.vue';

  import {
    educationRatio,
    educationTypeRatio,
    sexRatio,
    levelSum,
    unitSum,
    colorList,
    photoDetails
  } from '@/network/tg-fake-data.js';

  export default {
    name: 'sx-tech-left',
    components: {
      CommonPieNewChart,
      topBarChart,
      CommonLineChart
    },
    data() {
      return {
        man: sexRatio.series[0],
        woman: sexRatio.series[1],
         photoList: [],
        techPeoplePieConfig: {
          option: {
            title: '',
            id: 'techPeoplePie',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            },
            legend: {
              show: true,
              x: "80%",
              //   y: "bottom",
              orient: 'vertical',
              textStyle: {
                color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
                fontSize: 14,
              },
              padding: 20,
              itemGap: 14,
              data: []
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [40, 70],
              center: ['40%', '50%'],
              label: {
                formatter: '{a} {b} :{c}({d}%)'
              },
              labelLine: {
                length: 10,
                length2: 20,
              },
              data: []
            }]
          }
        },
        techPoliticalPieConfig: {
          option: {
            title: '',
            id: 'techPoliticalPie',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            },
            legend: {
              show: true,
              x: "80%",
              y: "center",
              orient: 'vertical',
              textStyle: {
                color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
                fontSize: 14,
              },
              padding: 20,
              itemGap: 20,
              data: []
            },

            series: [{
              name: '',
              type: 'pie',
              radius: [40, 70],
              center: ['40%', '50%'],
              label: {
                formatter: '{a} {b} :{c}\n({d}%)'
              },
              labelLine: {
                length: 10,
                length2: 20,
              },
              data: []
            }]
          }
        },
        techTutorBarConfig: {
          id: 'techTutorBar',
          option: {
            // title: {
            //   text: '',
            //   textStyle: {
            //     color: '#FFFFFF',
            //     fontSize: 16
            //   }
            // },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '0%',
              right: '10%',
              top: '15%',
              bottom: '0%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              min: 0,
              max: null,
              axisLabel: {
                color: "#E1E7FB"
              }
            },
            yAxis: {
              type: 'category',
              axisLabel: {
                color: '#E1E7FB',
                fontSize: 16
              },
              data: []
            },
            series: [{
              name: '',
              type: 'bar',
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#4465F3' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00FAFF' // 100% 处的颜色
                }],
              },
              barWidth: 10,
              itemStyle: {
                barBorderRadius: 5
              },
              label: {
                show: true,
                position: 'right',
                formatter: '{c}人',
                color: "#62FFEB",
                fontSize: 16
              },
              data: []
            }]
          }
        },

      }
    },
    mounted() {
      this.initTechPeople();
      this.techPolitical();
      this.initTechTutor();
      // this.initLevel();

      var photoDetailsList = JSON.parse(JSON.stringify(photoDetails))
      while (photoDetailsList.length > 0) {
        let li = photoDetailsList.splice(0, 3);
        this.photoList.push(li);
      }

    },
    methods: {
      initTechPeople() {
        this.techPeoplePieConfig.option.legend.data = educationRatio.category;
        this.techPeoplePieConfig.option.series[0].data = educationRatio.series.map((item, index) => {
          return {
            value: item,
            name: educationRatio.category[index]
          }
        });

        this.$refs.techPeoplePie.initChart();
      },
      techPolitical() {
        this.techPoliticalPieConfig.option.legend.data = ['其他', '党员'];
        this.techPoliticalPieConfig.option.series[0].data = [{
          name: '其他',
          value: 672-405
        }, {
          name: '党员',
          value: 405
        }]

        this.$refs.techPoliticalPie.initChart();
      },
      initTechTutor() {
        this.techTutorBarConfig.option.yAxis.data = educationTypeRatio.category.reverse();
        this.techTutorBarConfig.option.series[0].data = educationTypeRatio.series.reverse();

        this.$refs.techTutorBar.initChart();
      },

    }
  }
</script>
<style lang="scss" scoped>
  .sex-wrap {
    display: flex;

    .sex-box {

      text-align: center;
      // display: flex;
      // flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100px;
      height: 50%;
      margin: 0px 10px 0 15px;
      >img {
        width: 50px;
        margin-top: 10px;
      }
      font-size: 15px;
    }

    .sex-right {
      height: 100%;
      flex: 1;
      text-align: center;
      .sex-rt {
        width: 70%;
        margin: 15px auto 10px auto;
        p {
          float: left;
          width: 50%;
          font-size: 16px;

          >span {
            font-size: 34px;
          }
          &:first-child {
            color: #34D3F2;
          }
          &:last-child {
            color: #FCB2E5;
          }
        }
      }
      .sex-rm {
        width: 80%;
        margin: 10px auto;
        >p {
          height: 10px;
          background-color: #FCB2E5;
          border-radius: 5px;
          >span {
            display: block;
            height: 10px;
            border-radius: 5px;
            line-height: 0;
            background-color: #34D3F2;
          }
        }
      }
    }
  }
  .xpz-left {
    height: 100%;
    width: 370px;
    float: left;
  }
  .xpz-right {
    height: 100%;
    width: 1128px;
    float: left;
  }

  .photo-container {
    display: flex;

    .photo-bg {
      flex: 1;
      height: 200px;

      >div {
        background: url(../../../assets/imgs/tg/people-bg.png) no-repeat;
        height: 194px;
        width: 261px;
        float: right;
        position: relative;

        >img {
          width: 100px;
          height: 130px;
          background-color: #FFFFFF;
          position: absolute;
          top: 20px;
          left: 5px;
        }

        >div {
          position: absolute;
          top: 44px;
          left: 112px;
          font-size: 13px;
          line-height: 3em;
        }
      }
    }
  }
</style>
